<template>
  <div style="height: 100%; width: 100%">
    <div :id="id" style="height: 100%; width: 100%" class="higBox"></div>
  </div>
</template>
<script>
import highcharts from "highcharts";
import { fontChart } from "@/utils/echartPxToRem";
import VariablePie from 'highcharts/modules/variable-pie'
export default {
  props: {
    id: {
      type: String,
      required: true,
    },
    dataList: {
      type: Array,
      default: () => ([
        {
          name: 'rose1',
          y: 10, // 值
          z: 4 // 宽度
        },
        {
          name: 'rose2',
          y: 6, // 值
          z: 4 // 宽度
        },
        {
          name: 'rose3',
          y: 5, // 值
          z: 4 // 宽度
        },
        {
          name: 'rose4',
          y: 4, // 值
          z: 4 // 宽度
        },
        {
          name: 'rose5',
          y: 3, // 值
          z: 4 // 宽度
        }
      ])
    },
    color1: {
      type: Array,
      default: () => ([
        "#E23AF5",
        "#00FFFF",
        "#1523CB",
        "#4821CA",
        '#fff'
      ])
    },
    color2: {
      type: Array,
      default: () => ([
        "#BB42EF",
        "#7DE2BF",
        "#1523CB",
        "#4821CA",
        '#000'
      ])
    } 
  },
  watch: {
    dataList() {
      this.$nextTick(() => {
      });
    },
  },
  mounted() {
    VariablePie(highcharts)
    let data = this.dataList
    let that = this
    let num = 0
    data.map((item, index) => {
      num += item.y
    })
    data.map((item, index) => {
      item.z = item.y/num*100
      item.dataLabels = {
        enabled: true,
        color: {
          radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
          stops: [
            [0, that.color2[index]],
            [0.2, that.color2[index]],
            [1, that.color1[index]], // darken
          ],
        },
        style: {
          textOutline: "none",
        },
      }
    })
    highcharts.chart(this.id, {
      // 图标对象
      chart: {
        type: "variablepie",
        backgroundColor: "transparent", //背景透明
      },
      // 标题
      title: {
        text: null,
      },
      // 数据提示框
      tooltip: {
        enabled: false,
      },
      // 版权信息
      credits: {
        enabled: false, // 禁用版权信息
      },
      // 数据列
      series: [
        {
          minPointSize: 10,
          zMin: 0,
          size: "70%",
          innerSize: "50%",
          name: "outCircle",
          borderColor: "transparent", //去掉默认边框颜色
          dataLabels: {
            enabled: true,
            color: "rgba(255, 255, 255, 0.9)",
            style: {
              textOutline: "none",
            },
            useHTML: true,
            formatter: function () {
              return (
                `<p style='color: #fff;'>${parseInt(this.percentage)}%</p>`
              )
              // return parseInt(this.percentage) + "%";
            },
            // x: -15,
            // y: -40,
          },
          data: [
            {
              y: 10,//数值
              z: 4,//宽度
              name: "rose1",
              // dataLabels: {
              //   enabled: false,
              //   // color: "rgba(255, 255, 255, 0.5)",
              //   color: {
              //     radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
              //     stops: [
              //       [0, 'red'],
              //       [0.2, 'red'],
              //       [1, '#000'], // darken
              //     ],
              //   },
              //   // style: {
              //   //   textOutline: "none", //去掉字体默认样式
              //   // },
              // },
            },
            {
              y: 7,
              z: 6,
              name: "rose2",
              color: "#FF974F",
              dataLabels: {
                enabled: true,
                color: "rgba(255, 255, 255, 0.5)",
                style: {
                  textOutline: "none",
                },
              },
            },
            {
              y: 9,
              z: 8,
              name: "rose3",
              color: "#33D3B2",
              dataLabels: {
                enabled: true,
                color: "rgba(255, 255, 255, 0.5)",
                style: {
                  textOutline: "none",
                },
              },
            },
            {
              y: 9,
              z: 8,
              name: "rose4",
              color: "#798AFA ",
              dataLabels: {
                enabled: true,
                color: "rgba(255, 255, 255, 0.5)",
                style: {
                  textOutline: "none",
                },
                distance: 15,
              },
            },
            {
              y: 72, 
              z: 10,
              name: "rose5",
              color: "#007EFF",
              dataLabels: {
                enabled: true,
                color: "rgba(255, 255, 255, 0.5)",
                style: {
                  textOutline: "none",
                },
              },
            },
          ],
          data: data
        },
      ],
    });
  },
  destroyed() {
  },
  methods: {
  },
};
</script>
<style lang="less">
  .higBox{
    position: relative;
    z-index: 2;
  }
</style>
